<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="favicon.ico" mce_href="favicon.ico" rel="icon" type="image/x-icon" />
    <title>个人设置</title>
    <link rel="stylesheet" href="./css/person.min.css">
</head>

<body>
    <div class="conten_t">
        <!-- 导航栏 -->
        <div class="web_head_nav">
            <div class="nav_g">
                <div class="leftinner">
                    <a href="./index.html" class="logo_o">
                        <span class="en-name">
                            <b>z</b>Frontier
                        </span>
                        <span class="cn-name"></span>
                        <span class="bn_name">装备前线</span>
                    </a>
                </div>
                <div class="rightinner">
                    <div class="r_equip">
                        <div class="div_first">
                            <span class="choo-fn1">装备社区</span>
                            <ul class="Equipment_communi  Equipment_communi1">
                                <li>装备展示厅</li>
                                <li>zF生活</li>
                                <li>提问区</li>
                                <li>发车发车！</li>
                                <li>参议院</li>
                                <li>交易信息区</li>
                                <li>装备情报</li>
                            </ul>
                        </div>
                        <div class="div_two">
                            <span class="choo-fn2">装备商店</span>
                            <ul class="Equipment_communi  Equipment_communi2">
                                <li>
                                    <span class="iconfont" style="font-size: 20px;">&#xe616;</span>
                                    <span>机械键盘</span>
                                </li>
                                <li>
                                    <span class="iconfont" style="padding-right: 25px;">&#xe60e;</span>
                                    <span>键帽</span>
                                </li>
                                <li>
                                    <span class="iconfont">&#xe688;</span>
                                    <span>发烧 HiFi</span>
                                </li>
                                <li>
                                    <span class="iconfont">&#xe61c;</span>
                                    <span>模玩手办</span>
                                </li>
                                <li>
                                    <div class="emo_such">
                                        <span>pc主机</span>
                                        <span>日常数码</span>
                                        <span>NS专区</span>
                                        <span>PS4专区</span>
                                        <span>无人机</span>
                                        <span>支付宝信用租</span>
                                    </div>
                                    <span class="more_such">查看全部</span>
                                </li>
                            </ul>
                        </div>
                        <div class="div_third">
                            <span class="choo-fn3">MYKB</span>
                            <ul class="Equipment_communi  Equipment_communi3">
                                <li>定制工具</li>
                                <li>热门设计</li>
                                <li>MYKB Plus 主题键帽</li>
                                <li>定制说明</li>
                            </ul>
                        </div>

                    </div>
                    <div class="avater_a">
                        <span class="iconfont" style="font-size: 21px;color: #999;">&#xe651;</span>
                        <div>
                            <img src="./images/avater3.jfif" alt="" class="nknamepic" id="myavater">
                            <span class="iconfont ic_span">&#xee1c;</span>
                            <ul class="inner_we">
                                <li>我的主页</li>
                                <li>
                                    <span class="iconfont">&#xe602;</span>
                                    <span>我的帖子</span>
                                </li>
                                <li>
                                    <span class="iconfont">&#xe600;</span>
                                    <span>购物车</span>
                                </li>
                                <li>
                                    <span class="iconfont">&#xe78a;</span>
                                    <span>我的订单</span>
                                </li>
                                <li>
                                    <span class="iconfont">&#xe6d7;</span>
                                    <span>MYKB设计</span>
                                </li>
                                <li>
                                    <span class="iconfont">&#xe60c;</span>
                                    <span>登录</span>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="con_tent">
            <div class="main_contents">
                <div class="persion-set">
                    <div class="header-persion-seting">个人设置
                        <div></div>
                    </div>
                    <div class="body-avater">
                        <div class="setting-row">
                            <div class="header-key">头像</div>
                            <div class="header-value">
                                <input type="file" id="avater-h" style="display: none;" multiple>
                                <label for="avater-h" class="avata_r">
                                    <img src="./images/avater3.jfif" class="imgpic" alt=""
                                        style="width: 64px;height: 64px;">
                                    <input type="text" name="avatar" value="" style="display: none;">
                                    <span class="text-link ava">设置头像</span>
                                </label>
                            </div>
                        </div>
                        <div class="setting-row" style="display: flex;">
                            <div class="header-key">昵称</div>
                            <div class="header-value hide">
                                <span class="pet-name">克施勤德</span>
                                <span class="text-link nickn">修改</span>
                            </div>
                        </div>
                        <!-- 昵称修改框 -->
                        <div class="setting-row form-change-nick user-profile-change" style="visibility: hidden;">
                            <div class="header-key"></div>
                            <div class="header-value" style="position: relative;top:-50px;margin-bottom: -50px;">
                                <div>
                                    <input name="nickname" value="" placeholder="起个霸气的昵称吧φ(≧ω≦*)♪" class="inputvalues">
                                    <div class="help-info">昵称 365 天内只允许修改一次</div>
                                </div>
                                <div class="eventbroker">
                                    <button id="bt-save-nickname" class="button button-black hover-white"
                                        data-custompro="save">保存</button>
                                    <button id="bt-nick-cancel" class="button button-white hover-white"
                                        data-custompro="cancel">取消</button>
                                </div>
                            </div>
                        </div>
                        <div class="setting-row" style="display: flex;">
                            <div class="header-key">一句话介绍</div>
                            <div class="header-value hidee">
                                <span class="pet-name">介绍下你自己</span>
                                <span class="text-link nickns">修改</span>
                            </div>
                        </div>
                        <div class="setting-row form-change-bio user-profile-change" style="display: none;">
                            <div class="header-key"></div>
                            <div class="header-value" style="position: relative;top:-50px;margin-bottom: -50px;">
                                <div>
                                    <input name="bio" value="" placeholder="介绍下你自己吧&nbsp;(*≧∪≦)" class="sinputvalue">
                                    <div class="help-info">&nbsp;</div>
                                </div>
                                <div class="eventbroker">
                                    <button id="bt-save-bio" class="button button-black"
                                        data-custompro="save">保存</button>
                                    <button id="bt-bio-cancel" class="button button-white"
                                        data-custompro="cancel">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="header-persion-seting">我的资料
                        <div></div>
                    </div>
                    <div class="body-avater">
                        <div class="profile-section hideees">
                            <div class="setting-row">
                                <div class="header-key">性别</div>
                                <div class="header-value">
                                    <span class="pet-name">男</span>
                                    <span class="text-link updatepro">修改资料</span>
                                </div>
                            </div>
                            <div class="setting-row">
                                <div class="header-key">生日</div>
                                <div class="header-value ">
                                    <span class="pet-name">未知</span>
                                </div>
                            </div>
                        </div>
                        <div class="form-change-profile" style="display: none;">
                            <div class="setting-row" style="display: flex;">
                                <div class="header-key">性别</div>
                                <div class="header-value events">
                                    <input type="radio" id="female" name="gender" checked="" value="2" class="inp1"
                                        data-inp="inp1">
                                    <label for="female">女</label>
                                    <input type="radio" id="male" name="gender" value="1" class="inp2" data-inp="inp2">
                                    <label for="male">男</label>
                                </div>
                            </div>
                            <div class="setting-row" style="display: flex;">
                                <div class="header-key">生日 </div>
                                <div class="header-value" style="display: table-cell;vertical-align: middle;">
                                    <input name="birthday" value="1990-01-01" class="birthvalue"
                                        style="border: none;border-bottom: 1px solid #dadada;background: none;font-size: 14px;">
                                </div>
                            </div>
                            <div class="setting-row">
                                <div class="help-info"
                                    style="font-size: 12px;color: #92a4bb;display: block;width: 400px;margin: 10px 0;">
                                    资料信息他人不可见，请放心填写 </div>
                            </div>
                            <div class="setting-row user-profile-change eventbroker">
                                <button class="bt-save button button-black hover-white"
                                    data-custompro="save">保存</button>
                                <button class="bt-cancel button button-white hover-white"
                                    data-custompro="cancal">取消</button>
                            </div>
                        </div>
                    </div>
                    <div class="header-persion-seting">设置
                        <div></div>
                    </div>
                    <div class="body-avater">
                        <div class="setting-row alert-info">按照监管部门之要求，您需要绑定手机号完成实人认证后方可发布内容。</div>
                        <div class="setting-row">
                            <div class="header-key">绑定手机</div>
                            <div class="header-value">
                                <span class="text-link">绑定</span>
                            </div>
                            <div class="safw-bind-phone">
                                <span class="iconfont">&#xe681;</span>
                                绑定手机，账号更安全
                            </div>
                        </div>
                        <div class="setting-row">
                            <div class="header-key">绑定登录账号</div>
                            <div class="header-value">
                                <div class="value-group">
                                    <span class="iconfont" style="color: #65D500;font-size:20px">&#xe601;</span>
                                    <span class="text-link">绑定 微信</span>
                                </div>
                                <div class="value-group">
                                    <span class="iconfont" style="color: #3E94F8;font-size:20px">&#xe627;</span>
                                    <span class="text-link">绑定 qq</span>
                                </div>
                                <div class="value-group">
                                    <img src="./images/google-icon-2x.png" alt="" style="width: 16px;height:16px">
                                    <span class="text-link">绑定 Google</span>
                                </div>
                                <div class="value-group">
                                    <span class="iconfont" style="color: #3E94F8;">&#xe88d;</span>
                                    <span class="text-link">绑定 Facebook</span>
                                </div>
                            </div>
                        </div>
                        <div class="setting-row">
                            <div class="header-key">绑定支付宝账号</div>
                            <div class="header-value text-link>绑定</div>
                            <div class=" safw-bind-phone">绑定后可查看芝麻信用租赁订单,并导入zPassport经验值</div>
                        </div>
                        <div class="setting-row">
                            <div class="header-key">设置通知邮箱</div>
                            <div class="header-value text-link">绑定</div>
                            <div class="safw-bind-phone">绑定邮箱可以获取订单通知</div>
                        </div>
                        <div class="setting-row">
                            <div class="header-key">注销账号</div>
                            <div class="header-value text-link">申请注销账号</div>
                        </div>
                    </div>
                    <div class="header-persion-seting">实验室功能
                        <div></div>
                    </div>
                    <div class="body-avater">
                        <div class="setting-row">
                            <div class="header-key">实验室小工具</div>
                            <div class="header-value">
                                <span class="text-link">键盘测试</span>
                            </div>
                        </div>
                        <div class="setting-row">
                            <div class="header-key">新窗口打开帖子</div>
                            <div class="header-value">
                                <div class="value-group">
                                    <input type="checkbox">
                                </div>
                            </div>
                        </div>
                        <div class="setting-row">
                            <div class="header-key">宽屏下增加帖子宽度</div>
                            <div class="header-value">
                                <input type="checkbox" name="" id="">
                            </div>
                        </div>
                        <div class="setting-row">
                            <div class="header-key">切换语言</div>
                            <div class="header-value">
                                <input type="radio" name="language" id="chinese" value="zw">
                                <label for="chinese">中文</label>
                                &nbsp;
                                <input type="radio" name="language" id="english" value="en">
                                <label for="english">English</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- footer -->
    <div class="b_content">
        <div class="bottom_info">
            <div class="wrap">
                <div class="na_v first_in">
                    <div>zFrontier</div>
                    <ul>
                        <li>前线指南</li>
                        <li>用户协议</li>
                        <li>在线客服</li>
                        <li>联系前线</li>
                        <li>加入我们</li>
                    </ul>
                </div>
                <div class="na_v second_in">
                    <div>合作厂商</div>
                    <ul>
                        <li>WASD Keyboards</li>
                        <li>Das Keyboard</li>
                        <li>Feenix</li>
                        <li>GMK</li>
                    </ul>
                </div>
                <div class="na_v third_in">
                    <div>友情链接</div>
                    <ul>
                        <li>KeebTalk</li>
                        <li>Geekhack</li>
                        <li>Top Clack</li>
                    </ul>
                </div>
                <ul class="right_car">
                    <li>
                        <i class="iconfont ic">&#xe73c;</i>
                        <a href="" style="color: #999;">Global Store</a>
                    </li>
                </ul>

            </div>
            <div class="hr"></div>
            <div class="left">
                <div class="botto_m">
                    <div class="copyright">
                        Copyright © zFrontier Group Limited 保留所有权利。
                    </div>
                    <a href="">沪ICP备16013533号&nbsp;&nbsp;</a>
                    <a href="">沪ICP证B2-20180587&nbsp;&nbsp;</a>
                    <span>
                        <img src="./images/icon-wan.png" alt="">
                        <a href="">沪公网安备 31010602006270号&nbsp;&nbsp;</a>
                    </span>
                    <a href="">营业执照公示</a>
                </div>
                <a href="" class="b_img">
                    <img src="./images/web-app-logo.webp" alt="">
                </a>
            </div>

        </div>
    </div>
    </div>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js"></script>
    <script src="./js/PersonalSettings.js"></script>
    <script src="./js/personpic.js"></script>

</body>

</html>